<!-- Charts plugins -->
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.pie.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.tooltip_0.4.4.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/sparkline/jquery.sparkline.min.js"></script><!-- Sparkline plugin -->
<!-- Misc plugins -->
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>misc/qtip/jquery.qtip.min.js"></script><!-- Custom tooltip plugin -->
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>misc/totop/jquery.ui.totop.min.js"></script>

<style>
.btn-custom {
  background-color: hsl(317, 90%, 36%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cb0a94", endColorstr="#ae097f");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#cb0a94), to(#ae097f));
  background-image: -moz-linear-gradient(top, #cb0a94, #ae097f);
  background-image: -ms-linear-gradient(top, #cb0a94, #ae097f);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cb0a94), color-stop(100%, #ae097f));
  background-image: -webkit-linear-gradient(top, #cb0a94, #ae097f);
  background-image: -o-linear-gradient(top, #cb0a94, #ae097f);
  background-image: linear-gradient(#cb0a94, #ae097f);
  border-color: #ae097f #ae097f hsl(317, 90%, 34.5%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.09);
  -webkit-font-smoothing: antialiased;
}
</style>

<div class="row">
	<div class="col-lg-1">
		<div class="form-group">
			<div class="col-lg-offset-3 col-lg-3">
				<a href="<?php echo site_url("kuesioner"); ?>"><button type="button" id="simpan" name="simpan" class="btn btn-custom"><span class="icon16 icomoon-icon-arrow-left-7 white"></span>Kembali ke Halaman Kuesioner</button></a>
			</div>
		</div><!-- End .form-group  -->
	</div>
	<br/>
	<br/>
	<br/>
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4>
					<span class="icon16 icomoon-icon-bars"></span>
					<span>Report Global Kepuasan Pelanggan</span>
				</h4>
				<a href="#" class="minimize">Minimize</a>
			</div>
			<div class="panel-body">
				<div class="simple-pie" style="height: 300px;width:100%;"></div>
			</div>
		</div>
	</div>
</div><!-- End .panel -->

<script language="javascript">
$(document).ready(function() {
	var divElement = $('div'); //log all div elements
    $("#form-validate").validate({
    	ignore: null,
    	ignore: 'input[type="hidden"]',
    	rules: {
			tgl_awal: "required",
			tgl_akhir: "required"
		},
		messages: {
			tgl_awal: "Baris ini wajib diisi !!!",
			tgl_akhir: "Baris ini wajib diisi !!!"
		}
    });
	if (divElement.hasClass('simple-pie')) {
	<?php
	$sangat_puas = 0;
	$puas = 0;
	$kurang_puas = 0;
	$tidak_puas = 0;
	$a = 0;
	foreach($query as $row){
		// 1 - 1,75 : tidak puas
		// 1,76 - 2,5 : kurang puas
		// 2,51 - 3,25 : puas
		// 3,26 - 4 : sangat puas
		if( $row["HASIL"] >= 1 && $row["HASIL"] <= 1.75 ){
			$tidak_puas++;
		} elseif( $row["HASIL"] >= 1.76 && $row["HASIL"] <= 2.5 ) {
			$kurang_puas++;
		} elseif( $row["HASIL"] >= 2.51 && $row["HASIL"] <= 3.25 ) {
			$puas++;
		} else {
			$sangat_puas++;
		}
		// dump( $row["HASIL"] );
		$a++;
	}
	if($a > 0){
		$tidak_puas = $tidak_puas / $a * 100;
		$kurang_puas = $kurang_puas / $a * 100;
		$puas = $puas / $a * 100;
		$sangat_puas = 100 - $tidak_puas - $kurang_puas - $puas;
	}
	?>
	$(function () {
		var data = [
		    { label: "Tidak Puas : ",  data: <?php echo $tidak_puas; ?>, color: "#88bbc8"},
		    { label: "Kurang Puas : ", data: <?php echo $kurang_puas; ?>, color: "#ed7a53"},
		    { label: "Puas : ", data: <?php echo $puas; ?>, color: "#9FC569"},
		    { label: "Sangat Puas : ", data: <?php echo $sangat_puas; ?>, color: "#bbdce3"}
		];

	    $.plot($(".simple-pie"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	if (divElement.hasClass('simple-pie2')) {
	<?php
	$p = 0;
	$l = 0;
	$a = 0;
	foreach($query as $row){
		if($row["jenis_kelamin"] == 'L'){
			$l++;
		} else {
			$p++;
		}
		$a++;
	}
	if($a > 0){
		$p	= $p / $a * 100;
		$l	= 100 - $p;
	}
	?>
	$(function () {
		var data = [
		    { label: "Perempuan : ",  data: <?php echo $p; ?>, color: "#88bbc8"},
		    { label: "Laki - Laki : ",  data: <?php echo $l; ?>, color: "#ed7a53"}
		];

	    $.plot($(".simple-pie2"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie3')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query3 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["range_usia"]; ?> : ",  data: <?php echo ($row["USIA"] / count($query) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie3"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie4')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query4 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pekerjaan"]; ?> : ",  data: <?php echo ($row["PEKERJAAN"] / count($query) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie4"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie5')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query5 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pendidikan"]; ?> : ",  data: <?php echo ($row["PENDIDIKAN"] / count($query) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie5"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie6')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query6 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["urus_izin"]; ?> kali : ",  data: <?php echo ($row["IZIN"] / count($query) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie6"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart')) {
	$(function () {
		//some data
		var d1 = [];
		<?php
		foreach($query2 as $row){
		?>
		d1.push([<?php echo $row["URUTAN"]; ?>, <?php echo $row["HASIL"]; ?>]);
		<?php
		}
		?>

	    var ds = new Array();

	     ds.push({
	     	label: "Skor",
	        data:d1,
	        bars: {order: 1}
	    });

		var options = {
				bars: {
					show:true,
					barWidth: 0.1,
					fill:5
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart"), ds, options);
	});
	}//end if
});

</script>